<template>
  <div class="publishMain">
    <div class="publish">
      <van-button type="success" round class="btn" @click="posts">发布</van-button>
    </div>
    <div class="textContent">
      <van-cell-group inset>
        <van-field v-model="message" rows="5" autosize label="描述" type="textarea" maxlength="100" placeholder="请输入物品描述"
          show-word-limit />
      </van-cell-group>
    </div>
    <div class="upload">
      <van-uploader multiple v-model="fileList" :before-read="beforeRead" :max-count="9" />
    </div>
   
    <div class="typeBody">
      <div class="typelist">
        <div class="type" v-for="(item, index) in iconList" :key="index" data-id="index"
          :class="active == index ? 'active' : ''" @click="changeType(index, item.name)">
          <span class="typeIcon">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
          </span>
          <span class="typeName">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="price">
      <van-field v-model="price" type="number" label="价格" placeholder="请输入价格" />
    </div>
    <div class="unit">
      <van-field v-model="fieldValue" is-link readonly label="单位" placeholder="选择单位" @click="showPicker = true" />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
import { showFailToast, showToast } from 'vant';
import { publishType } from '@/model/index';
import * as qiniu from 'qiniu-js';
import { getToken, publish } from '@/api/index';
import { Ref } from 'vue';
import { userStore } from '@/store';

const iconList = [
  {
    icon: '#icon-btn_badminton',
    name: '运动'
  },
  {
    icon: '#icon-che',
    name: '交通'
  },
  {
    icon: '#icon-fangzi',
    name: '房源'
  },
  {
    icon: '#icon-dianqi',
    name: '电器'
  },
  {
    icon: '#icon-dianzishebei',
    name: '电子设备'
  }
]
let active: Ref<number> = ref(0)
let message = ref('');
let price = ref('');
const fileList = ref([]);
let ImgList: Array<string> = [];
let postType: string = '运动'

const posts = async () => {
  if (message.value == '' || price.value == '' || fileList.value.length == 0 || fieldValue.value == '') {
    showFailToast('请填写完整内容')
    return
  }
  const config = {
    region: qiniu.region.z2,
    domain: 's0nwuz2l9.hn-bkt.clouddn.com'
  }
  await getToken().then((res: any) => {
    console.log('token', res);
    fileList.value.forEach((file: any) => {
      const observable = qiniu.upload(file.file, null, res.upToken)
      const observer = {
        complete(res: { hash: string; }) {
          console.log('complete', res);
          const ImgUrl: string =  config.domain + '/' + res.hash;
          ImgList.push(ImgUrl)
        }
      }
      observable.subscribe(observer)
    })
  })
  const data: publishType = {
    ImgList: ImgList,
    price: price.value + fieldValue.value,
    remark: message.value,
    type: postType
  }
  setTimeout(async () => {
    console.log('data', data);
    await publish(data).then((res: any) => {
      if (res.code == 200) {
        fileList.value = []
        message.value = ''
        active.value = 0
        price.value = ''
        ImgList = []
        userStore().cardList.length == 0
      }
    })
  }, 1500)

}
const beforeRead = (file: File | Array<File>) => {
  if (file instanceof Array) {
    file.forEach((item) => {
      checkFile(item)
    })
  } else {
    checkFile(file)
  }
  return true
}
const checkFile = (file: File) => {
  const format = ['png', 'jpg', 'jpeg']
  const index = file.name.lastIndexOf(".");
  const finalName = file.name.substring(index + 1);
  if (!format.includes(finalName.toLowerCase())) {
    showFailToast("请上传" + format.join(",") + "格式图片");
    return false;
  }
}

const changeType = (index: number, type: string) => {
  postType = type
 if (type=='房源') {
  showToast('上传全景图可实现简单vr看房')
 }
  active.value = index
}

const columns = [
  { text: '天', value: '天' },
  { text: '时', value: '时' },
  { text: '月', value: '月' },
  { text: '年', value: '年' },

];

const fieldValue = ref('');
const showPicker = ref(false);
//@ts-ignore
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
  console.log(fieldValue.value);

};
</script>

<style lang='less' scoped>
@import url('../common/global.less');


.publishMain {
  gap: 0.625rem;
  .list();
  height: 100%;

  .publish {
    overflow: hidden;
    padding: 0.625rem;

    .btn {
      width: 4.375rem;
      height: 2.25rem;
      float: right;
    }
  }


  .textContent {
    width: 100%;
    margin-bottom: 0.625rem;
  }

  .upload {
    width: 92%;
    background: #fff;
    padding-left: 10px;
    padding-top: 10px;
    margin: 0 auto;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .typeBody {
    width: 92%;
    height: 4.5rem;
    margin: 1rem auto;
    border-radius: 5px;
    background: #fff;

    .typelist {
      display: flex;
      justify-content: center;
      align-items: center;

      .type {
        width: 4rem;
        height: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
      }
    }
  }

  .active {
    border-radius: 50%;
    background-color: rgb(86, 87, 86);
    color: #fff;
  }

  .price .unit {
    border-radius: 5px;
    margin: 10px auto;
    width: 85%;
  }
}
</style>








